import React, { useState, useRef } from 'react';
import { Tabs } from 'antd';
import { Empty } from 'react-vant';
import ImgLb from '../../Materialsc/minlb/minlb'
import Pagestpmz from './pagestpmz'
import PageTpdsfs from './PageTpdsfs';
import PagesTpyh from './PagesTpyh';
import { Search } from 'react-vant'
import "../PagesTp/pagestpcss.css"
const onChange = (key) => {
  console.log(key);
};


function PagesTp() {
  const [value, setValue] = useState('');
  const imglist2 = [
    "https://photo-static-api.fotomore.com/creative/vcg/400/version23/VCG21643fd3aad.jpg?uid=364&timestamp=1737597913&sign=b08a0b6c80f9e05caf588f42c6c763dd&imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp",
    "https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2180939520.jpg?uid=364&timestamp=1737597913&sign=b08a0b6c80f9e05caf588f42c6c763dd&imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp",
    "https://photo-static-api.fotomore.com/creative/vcg/400/version23/VCG2126fc4e850.jpg?uid=364&timestamp=1737597913&sign=b08a0b6c80f9e05caf588f42c6c763dd&imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp",
    "https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG211311151059.jpg?uid=364&timestamp=1737597913&sign=b08a0b6c80f9e05caf588f42c6c763dd&imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp",
    "https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2180939520.jpg?uid=364&timestamp=1737597913&sign=b08a0b6c80f9e05caf588f42c6c763dd&imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp",
    "https://photo-static-api.fotomore.com/creative/vcg/400/version23/VCG2126fc4e850.jpg?uid=364&timestamp=1737597913&sign=b08a0b6c80f9e05caf588f42c6c763dd&imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp",
    "https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG211311151059.jpg?uid=364&timestamp=1737597913&sign=b08a0b6c80f9e05caf588f42c6c763dd&imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp"
  ]
  const imgmap2 = imglist2.map((item, index) => {
    return <li key={index} style={{ width: '100px', height: '70px', marginLeft: '5px' }}><img src={item} alt="" style={{ width: '100%', height: '100%' }} /></li>
  })
  const slider = useRef(null)
  const btn = (e) => {

    let target = e.target
    // 右按钮
    if (target.className === 'next-btn') {
      slider.current.style.left = '-420px ';
      slider.current.style.transition = 'all 3s';
    }
    // 左按钮
    if (target.className === 'prev-btn') {
      slider.current.style.left = '0px';
    }
  }
  const items = [
    {
      key: '1',
      label: '推荐图片',
      children: <>
        <div className="slider-container" onClick={btn}>
          <div className="slider" ref={slider}>
            {imgmap2}
          </div>
          <button className="prev-btn">&#10094;</button>
          <button className="next-btn">&#10095;</button>
        </div>
        <p>新春福气到</p>
        <ImgLb></ImgLb>
        <p>高清烟花图</p>
        <PagesTpyh />
        <p>电商美妆人像</p>
        <Pagestpmz></Pagestpmz>
        <p>电商服饰</p>
        <PageTpdsfs />
      </>,
    },
    {
      key: '2',
      label: '我的收藏',
      children: <>
        <Empty description="暂无内容" >
          <p>点击图片上❤进行收藏</p>
        </Empty>
      </>
    },
    {
      key: '3',
      label: '我的购买',
      children: <>
        <Empty description="暂无内容" >
          <p>购买后的图片会显示在这里</p>
        </Empty>
      </>
    },
  ];
  return (
    <div style={{ width: '23.5vw', height: '800px', background: '#fff', padding: '10px' ,overflow:'auto'}}>
      <Search value={value} onChange={setValue} clearable placeholder="请输入搜索关键词" />
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} tabBarGutter={65} />
    </div>
  )
}

export default PagesTp
